<!DOCTYPE html>
<html lang="en">

<head>
	<title>three.js webgl - materials - lightmap</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
		body {
			background: #fff;
			padding: 0;
			margin: 0;
			overflow: hidden;
			font-family: georgia;
			text-align: center;
		}

		a {
			color: skyblue
		}

		#stats {
			position: absolute;
			top: 0;
			left: 0
		}

		#stats #fps {
			background: transparent !important
		}

		#stats #fps #fpsText {
			color: #abc !important
		}

		#stats #fps #fpsGraph {
			display: none
		}
	</style>
</head>

<body>
	<script src="three.min.js"></script>
	<script src="TrackballControls.js"></script>
	<script src="data.js"></script>

	<script>

		var camera, scene, renderer, group, cameraOrtho, dirLight, hemiLight, clock, trackballControls;
		var mouseX = 0, mouseY = 0;
		var windowHalfX = window.innerWidth / 2;
		var windowHalfY = window.innerHeight / 2;
		var frustumSize = 600;
		var aspect = window.innerWidth / window.innerHeight;
		var lookAtPosition = new THREE.Vector3();

		var texture2 = new THREE.TextureLoader().load( "5707432_202456402000_2.jpg" );
		var g1 = new THREE.BoxBufferGeometry(0.2, 0.2, 10);
		var g2 = new THREE.BoxBufferGeometry(9.8, 9.8, 0.2);
		var material2 = new THREE.MeshStandardMaterial({ color: 0x83929D });
		material2.map = texture2;
		var allwall = new THREE.Geometry();

		init();
		animate();
		function getmeash(ga, ma) {
			var mt = new THREE.Mesh(ga, ma);
			mt.castShadow = true;
			mt.receiveShadow = true;
			//mt.matrixAutoUpdate = false;
			mt.updateMatrix();
			return mt;
		}
		function gethuojia() {
			var huojia = new THREE.Group();
			var m1 = getmeash(g1, material2);
			m1.position.set(0, 0, 5);
			huojia.add(m1);

			var m2 = getmeash(g1, material2);
			m2.position.set(9, 0, 5);


			var m3 = getmeash(g1, material2);
			m3.position.set(9, 9, 5);


			var m4 = getmeash(g1, material2);
			m4.position.set(0, 9, 5);


			var m5 = getmeash(g2, material2);
			m5.position.set(4.5, 4.5, 1);


			var m6 = getmeash(g2, material2);
			m6.position.set(4.5, 4.5, 5);

			var m7 = getmeash(g2, material2);
			m7.position.set(4.5, 4.5, 9);


			huojia.add(m2);
			huojia.add(m3);
			huojia.add(m4);
			huojia.add(m5);
			huojia.add(m6);
			huojia.add(m7);

			huojia.castShadow = true;
			huojia.receiveShadow = true;
			return huojia;
		}
		function init() {
			clock = new THREE.Clock();
			camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
			camera.position.z = 50;
			camera.position.x = 0;
			camera.position.y = 0;
			trackballControls = new THREE.TrackballControls(camera);

			trackballControls.rotateSpeed = 1.0;
			trackballControls.zoomSpeed = 1.0;
			trackballControls.panSpeed = 1.0;
			//        trackballControls.noZoom=false;
			//        trackballControls.noPan=false;
			trackballControls.staticMoving = true;

			dirLight = new THREE.DirectionalLight(0xffffff, 1);
			
			dirLight.position.set(-200, 105, 103);
			//dirLight.position.multiplyScalar(30);


			lookAtPosition.set(0, 80, 0);
			scene = new THREE.Scene();
			scene.background = new THREE.Color(0xeeeeee);
			scene.fog = new THREE.Fog(0xffffff, 1, 10000);
			var geometry = new THREE.BoxGeometry(1, 1, 2);
			var geometry2 = new THREE.BoxGeometry(1, 0.5, 2);
			var geometry3 = new THREE.BoxGeometry(0.5, 1, 2);
			var geometry1 = new THREE.BoxBufferGeometry(1, 1, 2);
			var material = new THREE.MeshLambertMaterial({ color: 0xffffff });
			var planmaterial = new THREE.MeshLambertMaterial({ color: 0x555555 });
			group = new THREE.Group();


			data.map(d => {
				if (d.Type == 2) {
					var geo = geometry;
					if (d.WallType == 5) {
						geo = geometry2;
						
					} else if (d.WallType == 10) {
						geo = geometry3;
					}
					
						var t_x = d.X - 50;
						var t_y = 50 - (d.Y);
						geo.translate(t_x, t_y, 1);
						allwall.merge(geo);
						geo.translate(0 - t_x, 0 - t_y, -1);
						// var mesh = new THREE.Mesh(geo, material);

						// mesh.position.x = d.X - 50;
						// mesh.position.y = 50 - (d.Y);
						// mesh.position.z = 2;
						// mesh.castShadow = true;
						// mesh.receiveShadow = true;
						// mesh.matrixAutoUpdate = false;
						// mesh.updateMatrix();
						// group.add(mesh);
					
				} else if (d.Type == 1) {
					var testbox2 = gethuojia();

					testbox2.position.set(d.X - 50, 50 - d.Y, 0);
					testbox2.scale.set(0.1, 0.1, 0.1);
					group.add(testbox2);
				}

			});
			var mesh = new THREE.Mesh(allwall, material);

			mesh.castShadow = true;
			mesh.receiveShadow = true;
			//mesh.matrixAutoUpdate = false;
			//mesh.updateMatrix();
			group.add(mesh);

			var geometry = new THREE.PlaneBufferGeometry(200, 200, 1);
			var material = new THREE.MeshLambertMaterial({ color: 0xcccccc, side: THREE.DoubleSide });
			var texture = new THREE.TextureLoader().load( "11529624_131708606114_2.jpg" );
			texture.wrapS = THREE.RepeatWrapping;
			texture.wrapT = THREE.RepeatWrapping;
			texture.repeat.set( 200, 200 );
			var planmaterial = new THREE.MeshPhongMaterial();
            planmaterial.map = texture;

            //var panmesh = new THREE.Mesh(geom, mat);
			var plane = new THREE.Mesh(geometry, planmaterial);

			plane.receiveShadow = true;
			plane.castShadow = true;
			group.castShadow = true;
			group.receiveShadow = true;

			// var test = gethuojia();
			// test.position.set(50, 0, 1);
			// scene.add(test);
			
			scene.add(group);
			scene.add(plane);
			scene.add(camera);



			var ambienLight = new THREE.AmbientLight(0x555555);
			scene.add(ambienLight);

			dirLight.castShadow = true;
			dirLight.shadow.mapSize.width = 8192;
			dirLight.shadow.mapSize.height = 8192;
			dirLight.shadow.camera.near = 0.5;    // default
			dirLight.shadow.camera.far = 1000;     // default
			var d = 50;
			dirLight.shadow.camera.left = - d;
			dirLight.shadow.camera.right = d;
			dirLight.shadow.camera.top = d;
			dirLight.shadow.camera.bottom = - d;
			dirLight.shadow.camera.far = 1000;
			//dirLight.shadow.bias = - 0.011;
			

			hemiLight =  new THREE.HemisphereLight(0xffffff, 0xeeeeee, 0.8);
			scene.add(hemiLight);
			//scene.add( dirLight.target );
			//scene.add(dirLight);
			var helper = new THREE.CameraHelper( dirLight.shadow.camera );
			//scene.add( helper );

			renderer = new THREE.WebGLRenderer({ antialias: true });
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.shadowMap.enabled = true;
			document.body.appendChild(renderer.domElement);
			//


			//
			document.addEventListener('mousemove', onDocumentMouseMove, false);
			document.addEventListener('keyup', keyUp);
			//
			window.addEventListener('resize', onWindowResize, false);
		}
		var group_x = 0;
		var group_y = 0;
		function keyUp(e) {
			switch (e.key) {
				case "w": {
					group_y = group_y + 1;
					break;
				}
				case "a": {
					group_x = group_x - 1;
					break;
				}
				case "s": {
					group_y = group_y - 1;
					break;
				}
				case "d": {
					group_x = group_x + 1;
					break;
				}
			}
		}
		function onWindowResize() {
			windowHalfX = window.innerWidth / 2;
			windowHalfY = window.innerHeight / 2;
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);
		}
		function onDocumentMouseMove(event) {
			mouseX = (event.clientX - windowHalfX) * 10;
			mouseY = (event.clientY - windowHalfY) * 10;
		}
		//
		function animate() {
			requestAnimationFrame(animate);
			render();

		}

		function render() {

			var r = Date.now() * 0.0005;
			var delta = clock.getDelta();




			trackballControls.update(delta);
			//camera.position.x += ( mouseX - camera.position.x ) * 0.05;
			//camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
			//camera.fov = 35 + 30 * Math.sin( 0.5 * r );
			//camera.far = mesh.position.length();
			//camera.updateProjectionMatrix();
			camera.lookAt(lookAtPosition);
			group.position.x = group_x;
			group.position.y = group_y;
			renderer.render(scene, camera);
		}

	</script>

</body>

</html>